<template>
  <div class="device-manage">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="md" :sm="24">
              <a-form-item label="装置名称">
                <a-input v-model="queryParam.name" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :md="md" :sm="24">
              <a-form-item label="装置名称">
                <a-input v-model="queryParam.name" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :md="md" :sm="24">
              <a-form-item label="装置名称">
                <a-input v-model="queryParam.name" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :md="md" :sm="24" v-show="md == 8">
              <a-form-item label="开始时间">
                <a-date-picker
                  v-model="startValue"
                  :disabled-date="disabledStartDate"
                  show-time
                  inputReadOnly
                  format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请选择开始时间"
                  @openChange="handleStartOpenChange"
                />
              </a-form-item>
            </a-col>
            <a-col :md="md" :sm="24" v-show="md == 8">
              <a-form-item label="结束时间">
                <a-date-picker
                  v-model="endValue"
                  :disabled-date="disabledEndDate"
                  show-time
                  inputReadOnly
                  format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请选择结束时间"
                  @openChange="handleEndOpenChange"
                />
              </a-form-item>
            </a-col>
            <a-col :md="md" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button @click="$refs.table.refresh(true)" type="primary">
<!--                  <span class="font_family">&#xe625;</span>-->
                  查询
                </a-button>
                <a-button
                  style="margin-left: 8px"
                  @click="
                    () => {
                      this.queryParam = {}
                      this.startValue=null
                      this.endValue=null
                      $refs.table.refresh(true)
                    }
                  "
                >
<!--                  <span class="font_family">&#xe632;</span>-->
                  重置
                </a-button>
                <a-button
                  style="margin-left: 8px"
                  @click="
                    () => {
                      this.md == 6 ? (this.md = 8) : (this.md = 6)
                    }
                  "
                >
                  <span class="font_family" v-show="md == 8">
<!--                    &#xe62b;-->
                    收起
                  </span>
                  <span class="font_family" v-show="md == 6">
<!--                    &#xe630;-->
                    展开
                  </span>
                </a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="table-operator">
        <a-button type="primary" @click="add">新增</a-button>
        <a-button @click="batchDelete" v-if="selectedRowKeys && this.selectedRowKeys.length">删除</a-button>
      </div>
      <s-table
        ref="table"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        :rowSelection="rowSelection"
        :showPagination="true"
      >
        <span slot="bz" slot-scope="bz">
          <a-tooltip :title="bz">
            {{ bz }}
          </a-tooltip>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="deleteItem(record)">删除</a>
        </span>
      </s-table>
    </a-card>
  </div>
</template>

<script>
import { STable } from '@/components'
import { DeviceListService } from '@/views/demo/deviceListService'
import DeviceEdit from '@/views/demo/components/DeviceEdit'
import { MODAL_SIZE } from '@/config/uiConfig'
import moment from 'moment'
const columns = [
  {
    title: '装置名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '装置序列号',
    dataIndex: 'sn',
    key: 'sn',
  },
  {
    title: '备注',
    dataIndex: 'bz',
    key: 'bz',
    scopedSlots: { customRender: 'bz' },
  },
  {
    title: '操作',
    width: 130,
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
]

export default {
  name: 'TableList',
  components: {
    STable,
  },
  data() {
    return {
      //时间选择器
      startValue: null,//开始时间
      endValue: null,//结束时间
      endOpen: false,
      //一行三个md为8;一行三个md为6
      md: 6,
      // 查询参数
      queryParam: {
        name: '',
      },
      // 表头
      columns,
      expandedRowKeys: [],
      selectedRowKeys: [],
      selectedRows: [],
    }
  },
  watch: {
    startValue(val) {
      console.log('startValue', val);
    },
    endValue(val) {
      console.log('endValue', val);
    },
  },
  created() {},
  methods: {
    disabledStartDate(startValue) {
      const endValue = this.endValue;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.startValue;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      // if (!open) {
      //   this.endOpen = true;
      // }
    },
    handleEndOpenChange(open) {
      // this.endOpen = open;
    },
    /**
     * 加载列表数据
     * @param parameter
     * @returns {Promise<{data: (*|*[]), pageNo: number, totalCount: *}|{data: *[]}>}
     */
    loadData(parameter) {
      const requestParameters = Object.assign({}, parameter, this.queryParam)
      return DeviceListService.getListByPage(requestParameters)
    },
    /**
     * 新增
     */
    add() {
      this.$dialog(
        DeviceEdit,
        {
          on: {
            ok: () => {
              this.$notification.success({
                message: '成功',
                description: '新增成功',
              })
              this.$refs.table.refresh(true)
            },
            cancel() {},
            close() {},
          },
        },
        // modal props
        {
          title: '新增',
          width: MODAL_SIZE.MIDDLE,
          centered: true,
          maskClosable: false,
          okText: '确认',
          cancelText: '取消',
        }
      )
    },
    /**
     *  编辑
     */
    handleEdit(record) {
      DeviceListService.getItemById(record.id).then((data) => {
        this.$dialog(
          DeviceEdit,
          {
            record: data,
            on: {
              ok: () => {
                this.$notification.success({
                  message: '成功',
                  description: '编辑成功',
                })
                this.$refs.table.refresh(true)
              },
              cancel() {},
              close() {},
            },
          },
          // modal props
          {
            title: '编辑',
            width: MODAL_SIZE.MIDDLE,
            centered: true,
            maskClosable: false,
            okText: '确认',
            cancelText: '取消',
          }
        )
      })
    },
    /**
     * 单个删除
     */
    deleteItem(record) {
      // this.$confirm({
      //   title: '提示',
      //   content: '确定删除该装置：' + record.name + '?',
      //   okText: '确认',
      //   okType: 'danger',
      //   cancelText: '取消',
      //   onOk: () => {
      //     this.toDelete([record.id])
      //   },
      //   onCancel() {
      //     console.log('Cancel')
      //   }
      // })
      this.$mConfirm({
        title: '提示',
        content: '确定删除该装置：' + record.name + '?',
        okText: '确定',
        cancelText: '取消',
      })
        .then(() => {
          //点击确定之后的处理
          console.log('yes')
          this.toDelete([record.id])
        })
        .catch(() => {
          console.log('no')
        })
    },
    /**
     * 批量删除
     */
    batchDelete() {
      this.$mConfirm({
        title: '提示',
        content: '确定删除该' + this.selectedRowKeys.length + '项?',
        okText: '确认',
        cancelText: '取消',
      })
        .then(() => {
          //点击确定之后的处理
          console.log('yes')
          this.toDelete(this.selectedRowKeys)
        })
        .catch(() => {
          console.log('no')
        })
    },
    /**
     * 删除操作
     * @param ids
     */
    toDelete(ids) {
      DeviceListService.deleteByIds(ids).then((res) => {
        this.$notification.success({
          message: '成功',
          description: '装置删除成功',
        })
        this.$refs.table.refresh(true)
      })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
      }
    },
  },
}
</script>

<style lang="less" scoped>
</style>
